<template>
	<div class="back1">
		<h1>
			验证
		</h1>
		<el-form :model="checkdata" :rules="rules" ref="checkdata" label-width="100px" class="demo-ruleForm">
		  <el-form-item label="用户名" prop="username">
		    <el-input v-model="checkdata.username"></el-input>
		  </el-form-item>
		  <el-form-item label="真实姓名" prop="realname">
		      <el-input v-model="checkdata.realname"></el-input>
		  </el-form-item>
		  <el-form-item label="电话号码" prop="phonenum">
		      <el-input v-model="checkdata.phonenum"></el-input>
		  </el-form-item>
		  <el-form-item label="证件号" prop="userid">
		      <el-input v-model="checkdata.userid"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="checkuser">验证</el-button>
		    <el-button @click="resetForm('checkdata')">重置</el-button>
		  </el-form-item>
		  
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'checkuser',
		data() {
			var validatePhone = (rule, value, callback) => {
			      if (value === '') {
			        callback(new Error('请输入电话号码'))
			      }
			      if (value.length !== 11) {
			        callback(new Error('请输入正确电话号码'))
			      }
			var ab = /^[1][3,4,5,7,8][0-9]{9}$/
			      if (ab.test(value) === false) {
			        callback(new Error('请输入正确电话号码'))
			      }
			      callback()
			    }
			var validateUserId = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入身份证号码'))
				}
				if (value.length !== 18) {
					callback(new Error('请输入正确身份证号'))
				}
			var r = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (r.test(value) === false) {
					callback(new Error('请输入正确身份证号'))
				}
				callback()
			};
			return {
				checkdata: {
					username: '',
					realname: '',
					phonenum: '',
					userid: '',
				},
				rules: {
					username: [
						{required: true, message: '请输入用户名', trigger: 'blur'},
						{min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur'}
					],
					realname: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' },
						{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
					],
					phonenum: [
					  { required: true, message: '请输入电话号码', trigger: 'blur' },
					  { validator: validatePhone, trigger: 'blur' }
				
					],
					userid: [
						{ required: true, message: '请输入身份证号', trigger: 'blur'},
						{ validator: validateUserId, trigger: 'blur'}
					]
				},
			}
		},
		methods: {
			checkuser() {
				var url = "http://localhost:8848/user/checkuser?username="+this.checkdata.username+"&realname="+this.checkdata.realname+"&phonenum="+this.checkdata.phonenum+"&userid="+this.checkdata.userid;
				
				this.$axios.get(url)
					.then( (resp) => {
						var u = resp.data;
						
						if (u == 1) {
							this.$message.success("验证成功");
							this.$router.push('/forgetpass');
						}
						else if (u == 0) {
							this.$message.error("验证失败")
						}
					})
					.catch( (err) => {
						console.log("error=", err);
					})
			}
		}
	}
</script>

<style>
	/* .back {
		position: absolute;
		top: 10%;
		left: 20%;
		background-color: #E9EEF3;
		width: 800px;
		border-radius: 25px;
		text-align: center;
		padding: 5px 40px;
		box-sizing: border-box;
	} */
	.back1 {
		width: 700px;
		margin-top: 25px;
		margin-left: 400px;
	}
</style>
